<template>
  <div class="detail">
    <el-page-header @back="goBack" content="详情页面"> </el-page-header>
    <div class="synopsis">
      <p class="title">剧情简介</p>
      <p class="content">
        {{ movieDetail.introduction }}
      </p>
    </div>
    <div class="movie_review">
      <p class="title">电影评论</p>
      <div class="review_list">
        <div class="review" v-for="(item, index) in reviewList" :key="index" v-show="reviewList.length!=0">
          <el-avatar
            :size="60"
            :src="item.user.avatar"
            style="border: 2px grey solid"
            class="avatar"
          ></el-avatar>
          <p class="name">{{ item.user.nickname }}</p>
          <el-rate
            v-model="item.filmReview.star"
            disabled
            text-color="#ff9900"
            score-template="{value}"
            class="star"
          >
          </el-rate>
          <p class="createAt">{{ item.filmReview.createAt }}</p>
          <div class="show_content">{{ item.filmReview.comment }}</div>
        </div>
      <div v-show="reviewList==null || reviewList.length==0">暂无评论</div>
      </div>
    </div>
  </div>
</template>
<script>
import { MovieDetail, MovieReview } from "@/api/movie";
import bus from "@/api/eventBus";
export default {
  data() {
    return {
      reviewList: [
        // {
        //   name: "asdf",
        //   avatarAddress:
        //     "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        //   content: "非常棒！！",
        //   star: 5,
        // },
        // {
        //   name: "qwer",
        //   avatarAddress:
        //     "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        //   content: "还行",
        //   star: 3,
        // },
        // {
        //   name: "fdghfd",
        //   avatarAddress:
        //     "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        //   content: "一般",
        //   star: 3,
        // },
      ],
      movieDetail: {},
    };
  },
  mounted() {
    this.getMovieDetail();
    this.getMovieReview();
    bus.$on('reloadReview',()=>{
      this.getMovieReview();
    })
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    // 获取电影详情
    getMovieDetail() {
      MovieDetail(localStorage.getItem("fid")).then((res) => {
        res.msg = "电影详情-剧情介绍";
        // console.log(res);
        this.movieDetail = res.data;
      });
    },
    // 获取电影评论
    getMovieReview() {
      MovieReview(localStorage.getItem("fid")).then((res) => {
        res.msg = "影评";
        for(var i=0;i<res.data.length;i++){
          res.data[i].filmReview.createAt= this.formatDate(res.data[i].filmReview.createAt);
        }
        // console.log(res);
        this.reviewList = res.data;
      });
    },
    // 日期格式化
    formatDate(dateint) {
      var date = new Date(parseInt(dateint));
      var str = date.getFullYear() + "-";
      if(date.getMonth()<10){
        str+="0";
      }
      str+= (date.getMonth() + 1) + "-";
      if(date.getDate()<10){
        str+="0";
      }
      str+= date.getDate()+ " ";
      if(date.getHours()<10){
        str+="0";
      }
      str+=date.getHours()+":";
      if(date.getMinutes()<10){
        str+="0";
      }
       str+=date.getMinutes()+":";
      if(date.getSeconds()<10){
        str+="0";
      }
      str+=date.getSeconds();
      return str;
    },
  },
};
</script>
<style lang="scss" scoped>
.detail {
  width: 1000px;
  // height: 400px;
  margin: 0 auto;
  .synopsis {
    margin: 30px 0 60px;
    .title {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 40px;
    }
    .content {
      text-indent: 2em;
      line-height: 30px;
    }
  }
  .movie_review {
    margin: 30px 0 60px;
    .title {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 40px;
    }
    .review_list {
      height: auto;
      .review {
        margin-bottom: 40px;
        padding-bottom: 30px;
        border-bottom: 1px black dashed;
        .avatar {
          float: left;
        }
        .name {
          margin: 5px 0;
          margin-left: 80px;
          color: gray;
        }
        .star {
          margin-left: 20px;
          float: left;
        }
        .createAt {
          float: left;
          color: lightgray;
          margin-left: 10px;
        }
        .show_content {
          clear: both;
          border: 2px lightgray solid;
          border-radius: 10px;
          padding: 10px;
          padding-left: 20px;
          margin-left: 80px;
        }
      }
    }
  }
}
</style>